<template>
	<div>
		<el-dialog :title="dialogTitle" :before-close="handleClose" center show-close modal :visible.sync="dialog_visible"
			width="500px">
			<el-form :model="form" ref="form" :label-position="labelPosition" label-width="100px" :rules="rules"
				:inline="true">
				<el-form-item label="选择层级">
					<el-cascader v-model="form.parentId" :props="{ checkStrictly: true }" :show-all-levels="ddd"
						:options="options">
					</el-cascader>
				</el-form-item>
				<el-form-item prop="resourceName" label="资源名称">
					<el-input v-model="form.resourceName" placeholder="请输入资源名称"></el-input>
				</el-form-item>
				<el-form-item prop="resourceType" label="资源类型">
					<el-input v-model="form.resourceType" placeholder="请输入资源类型"></el-input>
				</el-form-item>
				<el-form-item label="资源icon">
					<el-input v-model="form.icon" placeholder="选填"></el-input>
				</el-form-item>
				<el-form-item label="资源路由">
					<el-input v-model="form.routerName" placeholder="选填"></el-input>
				</el-form-item>
				<el-form-item label="资源url">
					<el-input v-model="form.url" placeholder="选填"></el-input>
				</el-form-item>
				<div v-if="isAdd">
					<el-form-item>
						<el-button type="primary" style="margin-left: 100px;" @click="add('form')"> 添加</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="margin-left: 100px;" @click="resetBtu">重置</el-button>
					</el-form-item>
				</div>
				<div v-else>
					<el-form-item>
						<el-button type="primary" style="margin-left: 100px;" @click="update('form')"> 修改</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" style="margin-left: 100px;" @click="resetBtu">重置</el-button>
					</el-form-item>
				</div>
				
			</el-form>
		</el-dialog>
		<div style="margin-bottom: 10px;">
			<el-button type="primary" @click="dialogBtu">增加</el-button>
			<el-button type="primary" @click="del">删除</el-button>
		</div>
		<vxe-table resizable :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}"
			:data="tableData" :checkbox-config="{labelField: 'id', highlight: true}"
			@checkbox-change="selectChangeEvent">	
			<vxe-column type="checkbox" title="id" width="280" tree-node></vxe-column>
			<vxe-column field="resourceName" title="resourceName"></vxe-column>
			<vxe-column field="resourceType" title="resourceType"></vxe-column>
			<vxe-column field="routerName" title="routerName"></vxe-column>
			<vxe-column field="icon" title="icon"></vxe-column>
			<vxe-column field="url" title="url"></vxe-column>
			<vxe-column title="操作" width="100" show-overflow>
				<template #default="{ row }">
					<el-button type="primary" icon="vxe-icon-edit" @click="editEvent(row)">修改 </el-button>
				</template>
			</vxe-column>
		</vxe-table>
	</div>
</template>

<script>
	import {
		getResourceCascader,
		getResource,
		addResource,
		delResource,
		updateResource
	} from "../../../plugins/server.js"
	import mytable from "../../../components/myTable.vue"

	export default {
		data() {
			return {
				dialog_visible: false,
				isAdd:true,
				ddd: false,
				dialogTitle:"",
				labelPosition: "right",
				form: {
					parentId: "",
					resourceName:"",
					routerName:"",
					resourceType: "",
					icon: "",
					url: ""
				},
				rules: {
					resourceName: [{
						required: true,
						trigger: 'blur',
						message: "不可为空"
					}],
					resourceType: [{
						required: true,
						trigger: 'blur',
						message: "不可为空"
					}]
				},
				options: [],
				selectIdList:[],
				tableData:[{
					icon: "",
					id: "",
					parentId:"",
					resourceList: "",
					resourceName: "",
					resourceType: "",
					routerName: "",
					url: ""
				}],
				
			}
		},
		created() {
			this.getTableData();
		},
		components: {
			mytable,

		},
		methods: {
			update(form){
				this.$refs[form].validate((valid) => {
					if (valid) {
						//添加一个资源
						let arr = this.form.parentId;
						let parentId = arr[arr.length - 1]
						let data = {
							id:this.form.id,
							parentId: parentId,
							resourceName: this.form.resourceName,
							routerName: this.form.routerName,
							resourceType: this.form.resourceType,
							icon: this.form.icon,
							url: this.form.url
						}
						updateResource(data).then(res=>{

							if(res.data.data){
								this.dialog_visible=false;
								this.$message({
									message:res.data.message,
									type:'success'
								})
								this.getTableData();
							}else{
								this.$message({
									message:res.data.message,
									type:'warning'
								})
							}
						})
					}
				})
			},
			del(){
				if(this.selectIdList.length>0){
					delResource(this.selectIdList).then(res=>{
						if(res.data.data){
							this.$message({
							    message: res.data.message,
							    type: 'success'
							 });
							 this.getTableData()
						}else{
							this.$message({
							    message: res.data.message,
							    type: "warning"
							 })
						}
					})
				}
			},
			editEvent(row){ 
				this.isAdd=false;
				this.getOptions();
				this.dialogTitle="修改资源";
				this.form={
					id:row.id,
					icon:row.icon,
					parentId:row.parentId.toString(),
					resourceName:row.resourceName,
					routerName:row.routerName,
					resourceType:row.resourceType,
					url:row.url
				}
				this.dialog_visible = true;
				
			},
			selectChangeEvent({$table}) {
				const records = $table.getCheckboxRecords()
				let selectIdList=[]
				for(let item of records ){
					selectIdList.push(item.id)
				}
				this.selectIdList=selectIdList;
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			dialogBtu() {
				this.dialogTitle="添加资源";
				this.isAdd=true;
				this.resetBtu();
				this.dialog_visible = true;
				this.getOptions();
			},
			add(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						//添加一个资源
						let arr = this.form.parentId;
						let parentId = arr[arr.length - 1]
						let data = {
							parentId: parentId,
							resourceName: this.form.resourceName,
							routerName: this.form.routerName,
							resourceType: this.form.resourceType,
							icon: this.form.icon,
							url: this.form.url
						}
						//增加
						addResource(data).then(res => {
							if (res.data.message) {
								this.dialog_visible = false
								this.$message({
									message: '添加成功',
									type: "success"
								});
								this.getTableData();
							} else {
								this.$message({
									message: '添加失败',
									type: 'warning'
								});
							}

						})

					}
				})
			},
			resetBtu() {
				this.form.parentId = "0";
				this.form.resourceName = "";
				this.form.resourceType = "";
				this.form.icon = "";
				this.form.routerName = "";
				this.form.url = "";
			},
			findOptions(arr) {
				let optionsArr = [];
				for (let resource of arr) {
					let options = {
						label: "",
						value: "",
					}
					options.label = resource.resourceName
					options.value = (resource.id).toString()
					if (resource.resourceList !== null) {
						options.children = this.findOptions(resource.resourceList)
						optionsArr.push(options)
					}

				}


				return optionsArr
			},
			getOptions() {
				let options = [{
					label: "顶级资源",
					value: '0',
				}]
				getResourceCascader().then(res => {
					options[0].children = this.findOptions(res.data.data)
					this.options = options
				})
				//get 资源名称   用户id   ===>0  ===>
			},
			getTableData(){
				getResource().then(res=>{
					this.tableData=res.data.data
				})
			}
		}
	}
</script>

<style>
	.el-input {
		width: 300px;
	}
</style>